<template>
  <div>
    <div class="pie">
        <div id="pie1">
            <div id="main1" style="float:left;width:50%;height: 300px"></div>
        </div>
    </div>
  </div>
</template>

<script>
// 引入基本模板,并保存
let echarts = require('echarts')
export default {
  methods:{
    //初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption({
          title : {
              text: '某站点用户访问来源',//主标题
              subtext: '纯属虚构',//副标题
              x:'center',//x轴方向对齐方式
          },
          tooltip : {
              trigger: 'item', //提示信息
              formatter: "{a} <br/>{b} : {c} ({d}%)" //将信息进行百分比处理，然后显示
          },
          legend: {
              orient: 'vertical',
              bottom: 'bottom', // 文字的对齐方式
              data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
              {
                  name: '访问来源', //鼠标移入时，提示访问来源文字
                  type: 'pie',  //div的类名信息
                  radius : '55%',  //饼图的大小
                  center: ['50%', '60%'], //饼图的位置
                  data:[ //鼠标移入时，显示信息文字
                      {value:335, name:'直接访问'},
                      {value:310, name:'邮件营销'},
                      {value:234, name:'联盟广告'},
                      {value:135, name:'视频广告'},
                      {value:1548, name:'搜索引擎'}
                  ],
                  itemStyle: { //设置饼图其中一个被选中时的样式颜色
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
    },
  },
  mounted(){
    this.initData();
  },
}
</script>
